<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 点击对应a标签会跳出对应内容文本 -->
    <div id="father">
        <a href="#">链接1号</a>
        <a href="#">链接2号</a>
        <a href="#">链接3号</a>
        <a href="#">链接4号</a>
        <a href="#">链接5号</a>
        <a href="#">链接6号</a>
    </div>
</body>
<script>
    // 假如不用代理模式 我们将循环安装监听函数
    // const aNodes = document.getElementById('father').getElementsByTagName('a')
    // Array.prototype.forEach.call(aNodes,node => {
    //     node.addEventListener('click', e => {
    //         e.preventDefault()
    //         alert(`我是${node.innerText}`)
    //     })
    // })

    // 考虑到事件本身具有“冒泡”属性 当我们点击a元素的时候 
    // 点击事件会“冒泡”到父元素div上 从而被监听到
    // 如此一来 点击事件只需要绑定在父元素上面即可
    // 这一种就叫事件代理
    const father = document.getElementById('father')

    father.addEventListener('click', e => {
        // 识别是否是目标子元素
        if (e.target.tagName === 'A') {
            // 以下是监听函数的函数体
            e.preventDefault()
            alert(`我是${e.target.innerText}`)
        }
    })
    // 在这种做法下 我们的点击操作并不会直接触及目标子元素
    // 而是由父元素对事件进行处理和分发 间接地将其作用于子元素

</script>

</html>